<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css">
    <link href="/css/common.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/elementui.css" type="text/css">
    <link href="/css/index.css" rel="stylesheet" type="text/css">
    <style>
        .el-icon-arrow-left:before {
            content: '<'
        }

        .el-icon-arrow-right:before {
            content: '>'
        }

        .el-icon-more:before {
            content: '...'
        }
    </style>
</head>

<body>
    <div class="home" id="home">
        <div class="header">
            <div>
<p class="banner"><span class="actived" @click="toOther(info.role ? '/admin' : '/master')">社区空间</span><span @click="toOther('/index')">聊天室</span><span
                        @click="toOther('/search')">用户</span></p>

<div class="name" @click="toOther('/info')"><img :src="info.picture" /><span>{{info.nick}}</span></div>
            </div>
        </div>

        <div class="home">
            <div class="home-content">
                <div class="search"> <input placeholder="请输入搜索项" v-model="params.title" />
                    <div class="search-button" @click="getList"> <img src="../../images/search.png" /><span>搜索</span></div>
                </div>
                <ul class="talks">
                    <li v-for="(item, index) in list" :key="item.id">
                        <div class="people">
                            <p class="people-name">{{item.publisher}}:</p>
                            <img :src="item.picture">
                        </div>
                        <div class="main">
                            <p class="talks-title">{{item.title}}</p>
                            <div class="talks-content" v-html="item.content"></div>
                            <div class="detail">
                                <p class="publish">{{item.publishTime}}</p>
                                <div class="rate">
                                    <img v-for="(obj, index) in 5" :key="index" @click="toSorce(index, item.id)"
                                        :src=" index < item.score? '/images/yes.png' : '/images/no.png'" />
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div v-if="list.length<1" style="    text-align: center;
    margin-top: 100px;
    font-size: 18px;
    color: grey;">
                    该用户有点懒，未发表任何社区信息！
                </div>
                <div class="page" v-if="total">
                    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>

                <div style="display: flex;    margin-top: 40px;
    align-items: center;color: gray"><span style="display: inline-block;
    width: 162px;">发布我的社区生活</span><div style="border-bottom: 1px solid lightgrey;width: 100%"></div></div>
                <div class="send">
                    <div class="send-title"><span>标题</span><input v-model="title" /></div>
                    <div id="editor"></div>
                    <div class="send-button" @click="toPushContent">发布</div>
                </div>
            </div>
        </div>

        <!-- <div class="footer"></div> -->
    </div>
    <script src="/tools/vue.js"></script>
    <script src="/tools/http.js"></script>
    <script src="/tools/elementui.js"></script>
    <script src="/tools/wangEdiotr.js"></script>
    <script src="/js/jquery-1.12.3.min.js"></script>
    <script>
        new Vue({
            el: '#home',
            data() {
                return {
                    info: {
                        nick: '',
                        picture: '',
                        role: ''
                    },
                    params: {
                        current: 1,
                        size: 10,
                        title: '',
                        userId: ''
                    },
                    title: '',
                    list: [],
                    total: 0,
                    status:0,
                }
            },
            created() {
                let userid = this.GetQueryString('id')
                this.params.userId = userid ? userid : '';
                this.getInfo();
                this.getList();
            },
            mounted() {
                this.initeditor();
            },
            methods: {
                initeditor() {
                    const E = window.wangEditor;
                    const editor = new E('#editor')
                    // 或者 const editor = new E( document.getElementById('div1') )
                    console.log(editor, 'ed')

                    editor.config.menus = [
                        'head',
                        'link',
                        'italic',
                        'foreColor',
                        'image',
                        'video',
                        'underline'
                    ]

                    editor.config.uploadImgServer = '/uploadFile'
                    editor.config.uploadFileName = 'file'
                    editor.config.uploadImgHooks = {
                        customInsert: function (insertImgFn, result) {
                            // result 即服务端返回的接口
                            console.log('customInsert', result)

                            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                            insertImgFn(result.data)
                        }
                    }
                    editor.config.uploadVideoServer = '/uploadFile'
                    editor.config.uploadVideoName = 'file'
                    editor.config.uploadVideoHooks = {
                        customInsert: function (insertVideoFn, result) {
                            // result 即服务端返回的接口
                            console.log('insertVideoFn', result)

                            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                            insertVideoFn(result.data)
                        }
                    }

                    editor.create()
                    this.editor = editor;
                },
                toSorce(number, publishId) {
                    console.log(publishId, 'publishId')
                    let that = this;
                    ajax({
                        type: 'post',
                        url: '/evaluate',
                        data: {
                            number: number + 1,
                            publishId
                        },
                        contentType: 'application/json;charset=UTF-8',
                        success(result) {
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            if (res.code == 200) {
                                // that.params = {
                                //     current: 1,
                                //     size: 10,
                                //     title: ''
                                // };
                                // that.params.current = 1;          
                                that.getList();
                            }
                        }
                    })
                },
                toOther(url) {
                    if(this.status == 0){
                        window.location.href= url
                    }else{
                        if(url == '/index'){
                            alert("账户被禁用，无法进行聊天")
                        }else{
                            window.location.href= url
                        }
                    }
                },
                handleCurrentChange(e) {
                    this.params.current = current;
                    this.getList();
                },
                toPushContent() {
                    let content = this.editor.txt.html();
                    console.log(content, 'contentxxxxxxxxxxx')
                    let that = this;
                    if (!this.title) {
                        this.$message({
                            message: '请输入标题',
                            type: 'warning'
                        });
                        return
                    }

                    if (!content) {
                        this.$message({
                            message: '请输入内容',
                            type: 'warning'
                        });
                        return
                    }

                    ajax({
                        type: 'post',
                        url: '/publish',
                        data: {
                            content: content,
                            title: that.title
                        },
                        contentType: 'application/json;charset=UTF-8',
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            if (res.code == 200) {
                                that.title = '';
                                that.editor.txt.html('')
                                that.params = {
                                    current: 1,
                                    size: 10,
                                    title: ''
                                };
                                that.getList();
                            }
                        }
                    })
                },
                getList() {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/listPublished',
                        data: that.params,
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            if (res.code == 200) {
                                that.list = res.data.records;
                                that.total = res.total;
                            }
                        }
                    })
                },
                getInfo() {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/myInfo',
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            if (res.code == 200) {
                                that.info.role = res.data.role ? true : false;
                                that.info.nick = res.data.nick;
                                that.status = res.data.status
                                that.info.picture = res.data.picture ? res.data.picture : '/images/people.png'
                            }
                        }
                    })
                },
                GetQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return null;
                }
            }
        })
    </script>
</body>

</html>